<template>
  <div>
    <header>
        <div class="title">
            初始化AI
        </div>
    </header>
    <div class="content">
        <div class="content_title">
            配置参数
        </div>

        <div class="inputBox">
            <el-form :model="form" ref="form"  label-width="80px" :inline="false" size="normal" :rules="rules">
                 <el-form-item label="特征个数" label-width="200px" prop="n_visible">
                    <el-input v-model="form.n_visible" style="width:50%"></el-input>
                </el-form-item>
                <el-form-item label="隐含层神经元数量" label-width="200px" prop="n_hidden">
                    <el-input v-model="form.n_hidden" style="width:50%"></el-input>
                </el-form-item>
                <el-form-item label="隐含层神经元比例" label-width="200px" prop="hiddenRatio"> 
                    <el-input v-model="form.hiddenRatio" style="width:50%"></el-input>
                </el-form-item>
            </el-form>
            <div class="btnBox">
                    <el-button type="primary" @click="onSubmit">运行</el-button>
            </div >
            
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data(){
        var isNumber = (rule, value, callback) => {
                        if (/^(?:[1-9]\d*)$/.test(value) == false) {
                            callback(new Error("请输入正整数"));
                        } else {
                            callback();
                        }
                        }
        var isFloat = (rule, value, callback) => {
                        if (!(value>0 && value<1)) {
                            callback(new Error("请输入小于1大于0的小数"));
                        } else {
                            callback();
                        }
                        }
        
        return {
            form:{
            },
            textarea:'',
            commandId:'',
            isDisabled:true,
            rules:{
                n_visible:[
                    { required: true, message: '请输入特征个数', trigger: 'blur' },
                    {
                        validator:isNumber,
                        trigger: "change",
                    },

                ],
                n_hidden:[
                    {
                        required: true, message: '隐含层神经元数量', trigger: 'blur'
                    },
                    {
                        validator:isNumber,
                        trigger: "change",
                    },
                ],
                hiddenRatio:[
                    {
                        required: true, message: '请输入隐含层神经元比例', trigger: 'blur'
                    },
                    {
                        validator: isFloat,
                        trigger: "change",
                    },
                ]
            }
        }
    },
    computed:{
        
    },
    watch:{
        
    },
    methods: {
        onSubmit(){
            this.$http({
                method: "post",
                url:'/init/ai',
                data:{
                    hiddenRatio:this.form.hiddenRatio,
                    n_hidden:this.form.n_hidden,
                    n_visible:this.form.n_visible
                }
            }).then(res=>{
                if(res.data.code == 200) {
                    this.$message.success("初始化成功")
                }else{
                    this.$message.error("初始化失败")
                }
            })
        },
       
    },
    beforeDestroy(){
        
    }
}
</script>

<style scoped lang="less">
header{
    font-size: 24px;
    .title{
        color: #000;
        margin-bottom: 20px;
    }
    .header_content{
        color: #999;
        font-size: 13px;
        margin-bottom: 20px;
    }
}
.content{
    box-shadow: 0 0 10px #DEE1E6;
    margin: 30px 0;
    padding: 20px;
    font-size: 12px;
    .content_title{
        font-size: 14px;
        margin-left: 5px;
    }
    .inputBox{
        margin: 20px 0;
        .boxItem{
            // display: flex;
            // justify-content: space-around;
            margin: 10px 0;
            span{
                display: inline-block;
                width: 30%;
                text-align: right;
                margin-right: 10px;
            }
        }
        .btnBox{
            display: flex;
            justify-content: flex-end;
            margin-right: 50px;
        }
    }
    .action_head{
        span{
            margin-right: 20px;
        }
    }
    .progress{
        width: 20%;
        margin-top:20px ;
    }
    header{
        margin-top: 40px;
    }
    .textArea{
        padding: 10px;
        margin-bottom: 20px;
        textarea{
            width: 100%;
            resize: none;
        }
        .buttonBox{
            float: right;
            margin: 30px 0;
        }
    }
}
</style>